<template>
    <div class="mForm">

        <CountDown v-if="this.Filesuccess" url = "/message" ></CountDown>
        <mainForm>

            <div slot="title" class="title">留言板</div>

            <div class="form-item" slot="name">
                    <label for="name">请输入您的名字：</label>
                    <input type="text" v-model="formData.leaveName">
            </div>

            <div class="form-item" slot="longText">
                    <label for="name">留言内容:</label>
                    <textarea rows="8" cols="30" v-model="formData.leaveText">
                    </textarea>
            </div>

              <div class="form-item" slot="button">
                    <button @click.once="mySub">提交</button>
                </div>

        </mainForm>

    </div>
</template>

<script>
import {message} from '@/network/message/message'
import {day} from '@/untils/time/day'

import mainForm from '@/components/common/formCpn/mainForm'
import CountDown from '@/components/common/countDowm/countDown'//跳转成功提示组件

export default {
    name:'mForm',
    data(){
        return{
            Filesuccess: false,
            formData:{
                leaveText:'',
                leaveTime:'',
                leaveName:'',
                leaveImg_id:''
            }
        }
    },
    components:{
        mainForm,
        CountDown
    },
    methods:{
        mySub(){
            if(this.formData.leaveText === ''){
                alert('输入留言内容为空')
            }else{
                this.formData.leaveImg_id = Math.ceil(Math.random()*13)
                this.formData.leaveTime = day()
                /*let param = new FormData(); //创建form对象
                //使用formdata请求不会请求两次但是使用json方法会发送一个OPTIONS预请求，所以会请求两次
                param.append('leaveImg', this.formData.leaveImg) // 通过append向form对象添加数据
                而且预处理无法发送数据
                */
                message(this.formData).then( res => {
                    this.Filesuccess = true
                    //console.log(res)
                }).catch(err => {
                    console.log(err)
                })

            }
        }
    }
}
</script>

<style scoped>
.mForm{
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/common/form/ad.jpg);
}
</style>